import { useState, useEffect } from 'react';
import { Table, Input, Button, Col, Row, Form, Select, Pagination, message, Space, Radio } from 'antd';
import styles from './index.module.scss'
import { getImageList, getImageOperate } from '@/service';
import { useTranslation } from 'react-i18next';
export default (props) => {
    const [messageApi, contextHolder] = message.useMessage();
    const { t, i18n } = useTranslation();
    const [form] = Form.useForm(); // 创建表单实例
    const initState = () => ({
        total: '',
        containerList: [],
        loading: false
    }),
        [state, setState] = useState(initState);
    const [params, setParams] = useState({
        pageSize: 10,
        pageNo: 1,
        // contaunerName: '',
        amiName: ''
    });
    const STATE_LIST = [
        { key: 0, label: t('menu.configuration.table.enable') },
        { key: 1, label: t('menu.configuration.table.disable') },
    ];
    const goSearch = () => {
        // const contaunerName = form.getFieldValue('contaunerName');
        const amiName = form.getFieldValue('amiName');
        setParams((o) => ({ ...o, amiName }));
    };
    const columns = [
        // {
        //     title: 'Container Name',
        //     dataIndex: 'containerName',
        // },
        {
            title: t('menu.configuration.table.id'),
            dataIndex: 'id',
            width: 130,
        },
        {
            title:t('menu.configuration.table.amiName'),
            dataIndex: 'amiName',
            width: 200,
            ellipsis: true,
        },
        // {
        //     title: 'Status',
        //     dataIndex: 'awsState',
        //     width: 100,
        // },
        {
            title: t('menu.configuration.table.platform'),
            dataIndex: 'platform',
            width: 150,
        },
        {
            title: t('menu.configuration.table.coreArchitecture'),
            dataIndex: 'coreArchitecture',
            width: 150,
        },
        {
            title: t('menu.configuration.table.coreQuantity'),
            dataIndex: 'coreQuantity',
            width: 150,
        },
        {
            title: t('menu.configuration.table.coreCapacity'),
            dataIndex: 'coreCapacity',
            width: 150,
            render: (text) => `${text}G`,
        },
        {
            title: t('menu.configuration.table.id'),
            dataIndex: 'reelType',
            width: 150,
        },
        {
            title:t('menu.configuration.table.ebsCapacity'),
            dataIndex: 'ebsCapacity',
            width: 150,
            render: (text) => `${text}G`,
        },
        {
            title: t('menu.configuration.table.instanceType'),
            dataIndex: 'instanceType',
            width: 150,
        },
        {
            title: t('menu.configuration.table.operation'),
            key: 'state',
            width: 200,
            fixed: 'right',
            render: (_, record) => (
                <Space size="middle">
                    <Radio.Group value={record.state}
                        onChange={(e) => handleStateChange(record.id, e.target.value)}>
                        {
                            STATE_LIST.map(item => {
                                return (
                                    <Radio
                                        key={item.key}
                                        value={item.key}
                                    >
                                        {item.label}
                                    </Radio>
                                );
                            })
                        }
                    </Radio.Group>
                </Space>
            ),
        },
    ];
    const handlePageChange = (page) => {
        setParams(prevParams => ({ ...prevParams, pageNo: page }));
    };
    const handlePageSizeChange = (pageNo, pageSize) => {
        setParams(prevParams => ({ ...prevParams, pageNo, pageSize }));
    };
    const handleReset = () => {
        form.resetFields();
        setParams((prevParams) => ({ ...prevParams, amiName: '' }))
    };
    const handleStateChange = (id, newState) => {
        const updatedData = (state.containerList || []).map(item => {
            if (item.id === id) {
                return { ...item, state: newState };  // 更新状态
            }
            return item;
        });
        setState(o => ({
            ...o,
            containerList: updatedData || [],
        }));
        changeState(id, newState);
    };
    const changeState = (id, newState) => {
        let param = {
            imageDbId: id,
            state: newState
        }
        getImageOperate(param).then(response => {
            getContaunerFn();
        }).catch(e => {
            messageApi.open({
                type: 'error',
                content: e?.message,
            });
        });
    }
    const getContaunerFn = () => {
        setState(prevState => ({ ...prevState, loading: true }));
        getImageList(params).then(response => {
            setState(o => ({
                ...o,
                containerList: response?.data?.records || [],
                total: response?.data?.total || 0,
                loading: false
            }));
        }).catch(e => {
            messageApi.open({
                type: 'error',
                content: e?.message,
            });
            setState(prevState => ({ ...prevState, loading: false }));
        });
    }

    useEffect(() => {
        getContaunerFn();
    }, [params, i18n.language])
    return (
        <div className='page-container'>
            <div className={styles.content}>
                <div className={styles.tableCount}>
                    <Row className={styles.titBlock}>
                        <Col span={24}>
                            <span className='custom-title'>{t('menu.configuration.title')}</span> <span className={styles.tip}>{t('menu.configuration.tip')}</span>
                        </Col>
                    </Row>
                    <Row className={styles.titBlock}>
                        <Col span={24}>
                            <Form
                                name="userForm"
                                form={form}
                                className='custom-form-primary'
                                layout='inline'
                                style={{ width: '100%' }}
                            >
                                {/* <Col sm={12} md={8} lg={8}>
                                    <Form.Item label="Container Name" name="contaunerName">
                                        <Input type="text" placeholder="请输入" />
                                    </Form.Item>
                                </Col> */}
                                <Col sm={12} md={8} lg={8}>
                                    <Form.Item label={t('menu.configuration.form.lable.imageName')} name="amiName">
                                        <Input type="text" placeholder={t('common.modal.placehoderworkstation')} />
                                    </Form.Item>
                                </Col>
                                <Col span={2} className={styles.RightBlcok}>
                                    <Button type='primary' className='custom-btn-primary' onClick={goSearch}>{t('common.modal.button.search')}</Button>
                                    <div onClick={handleReset} className={styles.resert}>
                                        <img src={`${BASEDIR}/images/resert.svg`} alt="" />
                                        <div>{t('common.modal.button.reset')}</div></div>
                                </Col>
                            </Form>
                        </Col>
                    </Row>
                    <Table loading={state.loading} rowKey={'id'} scroll={{ x: '100%' }} className='custom-table' pagination={false} columns={columns} dataSource={state.containerList} />
                    <div className='custom-Pagination'>
                        <Pagination
                            total={state?.total}
                            showSizeChanger
                            showQuickJumper
                            showTotal={(totalNum) => t('common.pagination.totalNum', { totalNum })}
                            align="center"
                            current={params?.pageNo}
                            defaultPageSize={params?.pageSize}
                            onChange={handlePageChange}
                            onShowSizeChange={handlePageSizeChange}
                        />
                    </div>
                </div>

            </div>
            {contextHolder}
        </div>
    )
}